<%@ page contentType="text/html;charset=UTF-8" language="java"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>天狗家具商城 搜索结果</title>
<link href="resources/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/css/style.css" rel="stylesheet">
<link href="resources/css/layui.css" rel="stylesheet">
<script src="resources/js/jquery.min.js" type="text/javascript"></script>
<script src="resources/js/bootstrap.min.js" type="text/javascript"></script>
<script src="resources/js/layui.js" type="text/javascript"></script>
</head>
<body>
	<!--导航栏部分-->
	<jsp:include page="include/header.jsp" />
	<!-- 中间内容 -->
	<div class="container">
		<form class="layui-form searchForm"
			style="height: 70px; margin-top: 80px;">
			<div class="layui-input-inline" style="vertical-align: top;">
				<div class="layui-form-item">
					<label class="layui-form-label" style="width: 90px;">商品名称</label>
					<div class="layui-input-inline">
						<input type="text" name="keywords" id="keywords"
							placeholder="请输入查询的商品名称" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-input-inline" style="vertical-align: top;">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">金额</label>
						<div class="layui-input-inline" style="width: 100px;">
							<input type="text" name="startAmount" id="startAmount"
								autocomplete="off" lay-verify="number" class="layui-input">
						</div>
						<div class="layui-form-mid">-</div>
						<div class="layui-input-inline" style="width: 100px;">
							<input type="text" name="endAmount" id="endAmount"
								autocomplete="off" lay-verify="number" class="layui-input">
						</div>
					</div>
				</div>
			</div>
			<div class="layui-input-inline" style="vertical-align: top;">
				<button type="button" lay-submit lay-filter="searchForm"
					class="layui-btn">按综合评分排序</button>
			</div>
			<div class="layui-input-inline" style="vertical-align: top; margin-left:20px;">
				<button type="button" lay-submit lay-filter="searchForm"
					class="layui-btn">查询商品</button>
			</div>
		</form>
	</div>
	<div class="container">
		<div class="row">
			<div id="searchResultArea">
				<div class="span16" style="width: 1120px;">
					<ul>
						<c:forEach items="${searchList }" var="g" varStatus="t">
							<c:if test="${t.count%4!=0 }">
								<a href="goods/detail?goodsId=${g.goodsId }">
									<li><img src="upload/${g.goodsImg }" />
										<p class="goods-title">${g.goodsName }</p>
										<p class="goods-desc">${g.goodsDesc }</p>
										<p>
											<span class="newprice">${g.goodsPrice }</span>&nbsp;
										</p></li>
								</a>
							</c:if>
							<c:if test="${t.count%4==0 }">
								<a href="goods/detail?goodsId=${g.goodsId }">
									<li class='brick4'><img src="upload/${g.goodsImg }" />
										<p class="goods-title">${g.goodsName }</p>
										<p class="goods-desc">${g.goodsDesc }</p>
										<p>
											<span class="newprice">${g.goodsPrice }元</span>&nbsp;
										</p></li>
								</a>
							</c:if>
						</c:forEach>
					</ul>
				</div>
			</div>
		</div>

	</div>


	<!-- 尾部 -->
	<jsp:include page="include/foot.jsp" />

	<script type="text/javascript">
    layui.use('form', function () {
        var form = layui.form;

        form.verify({
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            number: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(value != null && value != ""){
                    if(!/^[-+]?(([0-9]+)([.]([0-9]+))?|([.]([0-9]+))?)$/.test(value)){
                        return '请输入数字';
                    }
                }
            }
        });

        form.on('submit(searchForm)', function (data) {
            if(data.field.startAmount != null && data.field.startAmount != '' && data.field.endAmount != null && data.field.endAmount !=''){
                if( parseInt(data.field.startAmount) > parseInt(data.field.endAmount)){
                    layer.msg(" 数字范围不正确！",{icon:5,anim:6,time:3000});
                    return false;
                }
            }

            $.ajax({
                type: "post",
                url: "goods/searchPre",
                data: data.field,
                dataType: "json",
                success: function (arr) {
                	if (Array.isArray(arr)) {
                        for (var i = 0; i < arr.length - 1; i++) {
                          var minIdex = i;
                          for (var j = i + 1; j < arr.length; j++) {
                            minIdex = arr[j].goodsNum > arr[minIdex].goodsNum ? j : minIdex;
                          }
                          [arr[i], arr[minIdex]] = [arr[minIdex], arr[i]];
                        }
                      }
                    if(arr.length == 0){
                        var str= "<img src='upload/not.jpg' style='width: 100%;height: 100%'>";
                        $("#searchResultArea").html(str);
                    }else{
                        var str = "<div class='span16' style='width:1120px;'><ul>";
                        for (var i = 0; i < arr.length; i++) {
                            if ((i + 1) % 4 != 0) {
                                str = str + "<a href='goods/detail?goodsId=" + arr[i].goodsId + "'><li>" +
                                    "<img src='upload/" + arr[i].goodsImg + "' /><p class='goods-title'>" + arr[i].goodsName + "</p>" +
                                    "<p class='goods-desc'>" + arr[i].goodsDesc + "</p><p><span class='newprice'>" + arr[i].goodsPrice + "元</span>&nbsp;" +"<div style='height: 30px; width: 70px; font-size:8px;color:grey; float: right; margin-top: -30px;' id='evaStar${e.evaId }' class='evaStar'>评分："
									+ arr[i].goodsNum
									+ "</div></p></li></a>";
                            } else {
                                str = str + "<a href='goods/detail?goodsId=" + arr[i].goodsId + "'><li class='brick4'>" +
                                    "<img src='upload/" + arr[i].goodsImg + "' /><p class='goods-title'>" + arr[i].goodsName + "</p>" +
                                    "<p class='goods-desc'>" + arr[i].goodsDesc + "</p><p><span class='newprice'>" + arr[i].goodsPrice + "元</span>&nbsp;" +"<div style='height: 30px; width: 70px; font-size:8px;color:grey; float: right; margin-top: -30px;' id='evaStar${e.evaId }' class='evaStar'>评分："
									+ arr[i].goodsNum
									+ "</div></p></li></a>";
                            }
                        }
                        var str = str + "</ul></div>";
                        $("#searchResultArea").html(str);
                    }
                }
            });
        })
    });

</script>
</body>
</html>